<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script><!--导入官网的vue,就不用去用本地的了-->
    <script src="https://static.runoob.com/code/js/vueapp.js"></script><!--用于model-->
    <script src="/vue.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!--导入自己在外部写的js-->
    <script src="/json/myaxios.js"></script>
    <style>
        ul{
            list-style: none;
            border: azure 1px;
        }
    </style>
</head>
<body>
<div id="axios">
    <span>{{msg}}</span>
    <input type="button" @click="get" value="get请求">
    <span v-text="'get请求到的数据'+gets"></span>
    <br>
    <input type="button" v-on:click="post" value="post请求">
    <span v-text="'post请求到的数据'+posts"></span>
       <!--可以回车键搜索，也可以按钮搜索-->
    <input v-model="search" @keyup.enter="enter" type="text " placeholder="搜索"><input @click="cli" type="submit" value="搜索">
      <ul>
          <li v-for="(item,index) in list" >
              {{index+1}}名字:{{item.name}}
              <img :src="item.pic"><!--属性可以直接嗲出来-->
          
          </li>
  </ul>

   <!-- <script>
   用外部js文件导入
        var vue=new Vue({
            el:"#axios",
            data:{
                msg:"学习axios,发出请求",
                gets:"",
                posts: "",
                /*用来接收后台传来的数据集合*/
                list:[],//先让数组变为空
                search: "搜索",

            },
            methods:{
                get:function () {
                    var that=this;//that 用来接收this，成为转换的媒介-

                    axios.get("/get").then(function(response){
                        that.gets=response.data
                       	},function(erro){
                        console.log("错误")

                   	})
                },
                post:function(){
                    /*请求的接口*/
                    var that=this;
                    axios.post("/post").then(function(response){
                        console.log(response.data.data)
                        that.posts=response.data.data
                    },function(erro){
                        console.log("错误")

                    })
                },
                enter:function () {
                    var that=this;
                    //用来接收转换
                    if(this.search==""){ //空的话，查全部
                        axios.post("/selall?index=1&limit=3").then(function (response) {
                            console.log(response.data);

                            that.list=response.data.data;


                        }).catch(function (erro) {
                            console.log("出错了")

                        })
                    }else{//不是空按名字查找
                        axios.post("/selall/"+this.search).then(function (response) {
                            console.log(response.data);
                            that.list=response.data.data;
                        }).catch(function (erro) {
                            console.log("出错了")

                        })
                    }


                },
                cli:function () {
                    var that=this;
                    //用来接收转换

                    if(this.search==""){ //空的话，查全部
                        axios.post("/selall?index=1&limit=3").then(function (response) {
                            console.log(response.data.data);
                            that.list=response.data.data;
                        }).catch(function (erro) {
                            console.log("出错了")

                        })
                    }else{
                        axios.post("/selall/"+this.search).then(function (response) {
                            console.log(response.data);
                            that.list=response.data.data;
                        }).catch(function (erro) {
                            console.log("出错了")

                        })
                    }

                }


            }
        })
    </script>-->
</div>

</body>
</html>